<template>
	<div class="shopcar-main">
    <div class="nogoods" v-if="shopCarList.length == 0 && overdueList.length == 0">
      <img src="../assets/image/shoppingtrolley@2x.png"/>
      <p>竟然是空的，我要买买买~</p>
      <router-link :to="{path:'index'}"><p class="goShopping">去逛逛</p></router-link>
    </div>
		<ul class="shoplist">
			<li class="shopli" v-for="(item,indexItem) in shopCarList">
				<div class="shoplitop fix" v-if="item.shoppingCarGoods.length > 0">
          <div class="select-circle select-brand fl" :class="{'checked': item.checked}" @click="checkStore(item)"></div>
          <router-link :to="{path:'recommendStore', query:{storeID: item.storeID}}"  class="shopname fl"><div>{{item.storeName}}</div></router-link>
				</div>
				<div class="shoplibottom" v-for="(part,indexPart) in item.shoppingCarGoods">
          <div class="select-circle select-product fl" :class="{'checked': part.checked}" @click="selectedProduct(item,part)"></div>

          <router-link :to="{path:'commodityDetail', query:{spu: part.spu}}" class="shopimg fl"><img :src="part.imageUrl"> </router-link>

					<div class="shopmid fl">
            <router-link :to="{path:'commodityDetail', query:{spu: part.spu}}"><div class="shopmid_title">{{part.goodsName}}</div></router-link>
						<div class="shopmid_specification">{{part.color}}{{part.color ? ';' : ''}}&nbsp;{{part.size}}</div>
						<div class="fix">
							<div class="shopmid_money fl">￥{{part.shopPrice}}</div>
							<div class="shopmid_salemoney fl" v-if="part.itemDiscount > 0">已降￥{{part.itemDiscount}}</div>
						</div>
						<div class="calculate fix">
							<img class="calculate_minus fl" src="../assets/image/-@2x.png" @click="changeNum(part,-1)">
              <input class="calculate_num fl" type="text" :value="part.itemNum" disabled>
							<img class="calculate_plus fl" src="../assets/image/+@2x.png" @click="changeNum(part,1)">
						</div>
					</div>
					<img class="shopdelete fr" src="../assets/image/ico_delete_2.png" @click="deletePro(item,indexItem,part,indexPart,'effective')">
				</div>
			</li>
		</ul>
    <ul class="overdueBar" v-if="overdueList != null || undefined">
      <li class="shopli" v-for="(part,indexPart) in overdueList">

        <div class="shoplibottom fix">
          <div class="overdue fl">失效</div>
          <router-link :to="{path:'commodityDetail', query:{spu: part.spu}}" class=" fl"><img class="shopimg" :src="part.imageUrl"></router-link>
          <div class="shopmid fl">
            <router-link :to="{path:'commodityDetail', query:{spu: part.spu}}">
              <div class="shopmid_title">{{part.goodsName}}</div>
              <div class="shopmid_specification">{{part.color}}{{part.color ? ';' : ''}}&nbsp;{{part.size}}</div>
              <div class="fix">
                <div class="shopmid_money fl">￥{{part.shopPrice}}</div>
                <!--<div class="shopmid_salemoney fl">已降￥{{part.itemDiscount}}</div>-->
              </div>
              <div class="calculate fix">
                x&nbsp;{{part.itemNum}}
              </div>
            </router-link>
          </div>
          <img class="shopdelete fr" src="../assets/image/ico_delete_2.png" @click="deletePro('item','indexItem',part,indexPart,'overdue')">
        </div>

      </li>
    </ul>
		<div class="clearshop" @click="clearALL()" v-if="overdueList != null && overdueList.length != 0">一键清空失效商品</div>
		<div class="settle fix"  v-if="shopCarList != null && shopCarList.length != 0">
      <div class="select-circle select-all fl" @click="selectAll()" :class="{'checked': checkAllFlag}"></div>
			<div class="settleall fl">全选</div>
			<a @click="settle" class="settlemoney fr">结算({{totalNum}}) </a>
			<div class="fr">
				<div class="settleallmoney"><span>合计：</span>{{settleMoney}}</div>
				<div class="settleallsale" v-if="discountMoney > 0">已优惠 ￥{{discountMoney}}</div>
			</div>
		</div>
    <footerBottom pageType='shopcar'></footerBottom>
    <login></login>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import login from './login'
import footerBottom from '../components/footer'
import store from '../assets/js/store.js'

export default {
	data () {
		return {
      token:'',
      shopCarList:[],
      storeList:[],
      overdueList:[],
      checkAllFlag:false,
      totalMoney:0,
      discountMoney:0,
      settleMoney:0,
      totalNum:0,
      storeIndex:null,
      shopcarArr:[],
		}
	},
  name: 'app',
  components: {
    login,
    footerBottom
  },
  mounted:function () {
    this.$nextTick(function () {
      this.fetch();
      this.shopCarView();
    })
  },
	methods:{
    shopCarView:function () {
      var _this = this;
      this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/getShoppingCart',{token:this.token},{emulateJSON : true}).then(function (res) {
        if(res.body.code == 10009){
          alert(res.body.content.statusMsg);
          _this.$store.commit('upLoginOpen', { isOpen : true});
        }else {
          if(res.body.content.effective){
            _this.shopCarList = res.body.content.effective;
          }
          if(res.body.content.invalid){
            _this.overdueList = res.body.content.invalid;
          }
        }
      });
    },
    fetch:function () {
      this.token = (window.localStorage.getItem("token") || '[]');
    },
    changeNum:function (product,way) {
      if(way>0){
        product.itemNum++;
      }else{
        product.itemNum--;
        if(product.itemNum<1){
          product.itemNum = 1;
        }
      }
      this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/addShoppingCarItemSynchro',{token:this.token,sku:product.sku,itemNum:product.itemNum},{emulateJSON : true}).then(function (res) {
      });
      this.calcTotalPrice();
    },
    selectedProduct:function (item,part) {
        var _this = this;
      if(typeof part.checked == 'undefined'){
        this.$set(part,"checked",true);
      }else{
        part.checked = !part.checked;
      }
      this.storeList = item.shoppingCarGoods;
      var proList = [];
      this.storeList.forEach(function (part,index) {
        if(part.checked == true){
          proList.push(part.checked);
          if(proList.length == item.shoppingCarGoods.length){
            item.checked =true;
          }
        }else {
          item.checked =false;
          _this.checkAllFlag = false;
        }
      });
      this.calcTotalPrice();
    },
    checkStore:function (item) {
      var _this = this;
      if(typeof item.checked == 'undefined'){
        this.$set(item,"checked",true);
      }else{
        item.checked = !item.checked;
        _this.checkAllFlag = false;
      }
      this.storeList = item.shoppingCarGoods;
      this.storeList.forEach(function (part,index) {
        if(typeof part.checked == 'undefined'){
          _this.$set(part,"checked",true);
        }else{
          part.checked = item.checked;
        }
      });
      this.calcTotalPrice();
    },
    selectAll:function () {
      var _this = this;
      _this.checkAllFlag = !_this.checkAllFlag;
      var proList = [];
      this.shopCarList.forEach(function (item,index) {
        if(typeof item.checked == 'undefined'){
          _this.$set(item,"checked",true);
        }else{
          item.checked = _this.checkAllFlag;
        }
        _this.storeList = item.shoppingCarGoods;
        _this.storeList.forEach(function (part,index) {
          if(typeof part.checked == 'undefined'){
            _this.$set(part,"checked",true);
          }else{
            part.checked = _this.checkAllFlag;
          }
        });

        });
      this.calcTotalPrice();
    },
    deletePro:function (item,indexItem,part,indexPart,way) {
      var _this = this;
      if (way == 'effective'){
        this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/delShoppingCart',{token:this.token,skus:part.sku},{emulateJSON : true}).then(function (res) {
          if(res.body.state == 'success'){
            _this.shopCarList[indexItem].shoppingCarGoods.splice(indexPart,1);
            if(_this.shopCarList[indexItem].shoppingCarGoods.length == 0){
              _this.shopCarList.splice(indexItem,1);
            }
            _this.calcTotalPrice();
          }
        });

        this.calcTotalPrice();
      }else {
        this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/delShoppingCart',{token:this.token,skus:part.sku},{emulateJSON : true}).then(function (res) {
          if(res.body.state == 'success'){
            _this.overdueList.splice(indexPart,1);
          }
        });

      }
    },
    clearALL:function () {
        var _this = this;
      var clearList = '';
      this.overdueList.forEach(function (part,index) {
//        clearList.push(part.sku+',');
          clearList += part.sku +',';
      });
      var indexNum = _this.overdueList.length-1;
      this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/delShoppingCart',{token:this.token,skus:clearList},{emulateJSON : true}).then(function (res) {
          if(res.body.state == 'success'){
            _this.overdueList = [];
          }
      });
    },
    calcTotalPrice:function () {
      var _this = this;
      this.totalMoney = 0;
      this.discountMoney = 0;
      this.totalNum = 0;
      this.shopCarList.forEach(function (item,index) {
        _this.storeList = item.shoppingCarGoods;
        _this.storeList.forEach(function (part,index) {
          if(part.checked){
            _this.totalMoney += part.shopPrice*part.itemNum;
            _this.discountMoney += part.itemDiscount*part.itemNum;
            _this.totalNum += part.itemNum;
          }
        });
      });
      _this.settleMoney = _this.totalMoney - _this.discountMoney;
    },
    settle:function () {
        var _this = this;
      this.shopCarList.forEach(function (item,index) {
        _this.storeList = item.shoppingCarGoods;
        _this.storeList.forEach(function (part,index) {
          if(part.checked){
            var shopCarMsg = {"spu":part.spu,"storeId":item.storeID,"storeName":item.storeName,"storePhoneNum":item.storePhoneNum,"address":item.address,"sku":part.sku,"storeSku":part.storeSku,"itemName":part.goodsName,"itemNum":part.itemNum,"itemPrice":part.marketPrice,"itemPriceNow":part.shopPrice,"itemDiscount":part.itemDiscount,"itemColor":part.color,"itemSize":part.size,"imageUrl":part.imageUrl,"isOnline":part.isOnline};
            _this.shopcarArr.push(shopCarMsg);
          }
        });
      });
      if(_this.shopcarArr ==null||_this.shopcarArr.length==0){
        alert("请选择商品！")
      }else {
        localStorage.removeItem("shopCarMsg");
        localStorage.setItem("shopCarMsg",JSON.stringify(_this.shopcarArr));
        _this.$router.push({
          path: 'confirmOrder',
          query: {
            from: "shopCar"
          }
        })

      }
    }
	},

}
</script>
<style lang="scss">
  .shopcar-main{
  .nogoods{
    padding:2rem 0;
    img{width: 2.5rem; height: 2.5rem; margin: 0 auto;}
    p{margin:0.3rem 0; font-size: 0.24rem; line-height: 0.24rem; text-align: center; color: #000;}
    a{display: block;}
    .goShopping{margin: 0.6rem auto 0; width: 2rem; height: 0.66rem; border: 0.02rem solid #FF96AA; border-radius: 0.33rem; font-size: 0.36rem; line-height: 0.66rem; text-align: center; color: #FF96AA;}
  }
    a{display: block;}
    .shopli{ padding-bottom: 0.2rem; }
    .shoplitop{display: block; margin-bottom: 0.04rem; padding: 0 0.3rem; height: 0.88rem; background: #fff; }
    .select-circle{width: 0.3rem; height: 0.3rem; background: url("../assets/image/unselected@2x.png")no-repeat; background-size: 0.3rem 0.3rem;}
    .checked{width: 0.3rem; height: 0.3rem; background: url("../assets/image/select@2x.png")no-repeat; background-size: 0.3rem 0.3rem;}
    .select-brand{ margin: 0.29rem 0;}
    .select-product{margin: 0.95rem 0;}
    .select-all{margin: 0.34rem 0.16rem 0.34rem 0.3rem;}
    .shopname{
      width: calc(100% - 0.9rem); padding-left: 0.46rem;
      div{width: 100%; line-height: 0.88rem; font-size: 0.28rem; color: #151517;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    }
    .shoplibottom{ padding: 0 0.3rem; height: 2.2rem; background: #fff; }
    .shopimg{
      margin: 0.2rem 0 0 0.44rem;background: #eee; border-radius: 0.1rem;
      img{ width: 1.8rem; height: 1.8rem; }
    }
    .shopmid{
      padding-left: 0.14rem; width: 3.6rem;
      .shopmid_title{ padding-top: 0.26rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #151517; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
      .shopmid_specification{ padding-top: 0.2rem; height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #999; }
      .shopmid_money{ padding-top: 0.18rem; height: 0.28rem; line-height: 0.28rem; font-size: 0.28rem; color: #ff365d; }
      .shopmid_salemoney{ padding: 0.22rem 0 0 0.3rem; height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #ff365d; }
      .calculate{ padding-top: 0.2rem; height: 0.5rem; }
      .calculate_minus{ width: 0.5rem; height: 0.5rem; }
      .calculate_num{ width: 1rem; height: 0.5rem; line-height: 0.5rem; text-align: center; font-size: 0.28rem; color: #666; background: none;}
      .calculate_plus{ width: 0.5rem; height: 0.5rem; }
    }
    .shopdelete{ margin-top: 0.88rem; width: 0.44rem; height: 0.44rem; }
    .clearshop{ margin: 0 auto 1.9rem; width: 2.2rem; height: 0.52rem; line-height: 0.52rem; font-size: 0.24rem; text-align: center; color: #666; border: 1px solid #666; border-radius: 0.1rem; }
    .settle{ width: 100%; height: 0.98rem; background: #fff; position: fixed; left: 0; bottom: .88rem;}
    .settle + .footer{    background-color: #fff;}
    .settleall{ line-height: 0.98rem; font-size: 0.24rem; color: #666; }
    .settlemoney{ width: 2.1rem; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.36rem; color: #fff; background: #ff365d; }
    .settleallmoney{
      padding: 0.2rem 0.16rem 0 0; height: 0.4rem; line-height: 0.4rem; font-size: 0.4rem; color: #ff365d;
      span{ font-size: 0.22rem; color: #151517; }
    }
    .settleallsale{padding: 0.1rem 0.16rem 0 0; height: 0.2rem; line-height: 0.2rem; text-align: right; font-size: 0.2rem; color: #999; }
    .overdueBar{
      padding-top:0.3rem;
      .shoplibottom{ height: 1.9rem;}
      .overdue{margin:0.81rem 0; width: 0.6rem; height: 0.28rem; border: 1px solid #666; border-radius: 0.04rem; font-size: 0.2rem; text-align: center; line-height: 0.28rem; color: #666;}
      .shopimg{ width: 1.5rem; height: 1.5rem; margin: 0.2rem 0 0 0.15rem;}
      .calculate{height:0.28rem; padding: 0.1rem 0 0 0.04rem; font-size: 0.28rem; line-height:0.28rem; color: #666;}
    }
  }
</style>
